﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="dhtmlxgantt.js" type="text/javascript"></script>
    <link href="dhtmlxgantt.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="JavaScript">

        var DataConvertor = new Object();

        var dataFromServer = 
        {
            Id: "1",
            Name: "青山老妖在等待",
            StartDate : new Date(2006,5,12),
            ChildTasks:
            [
                {
                    Id: "1",
                    Name: "青1",
                    StartDate: new Date(2006, 5, 12),

                    Duration: 20,
                    IsCompleted: false,
                    DependencyTaskId: "",
                    ChildTasks:
                    [
                        {
                            Id: "2",
                            Name: "青1-1",
                            StartDate: new Date(2006, 5, 12),
                            Duration: 15,
                            IsCompleted:true,
                            DependencyTaskId:"",
                            ChildTasks:[]
                        },
                        {
                            Id: "3",
                            Name: "青1-2",
                            StartDate: new Date(2006, 5, 12),

                            Duration: 15,
                            IsCompleted: false,
                            DependencyTaskId: "",
                            ChildTasks:[]
                        }
                    ]
                }
            ]
        };
        
        function Plane(id, name, startDate)
        {
            this.Id = id;
            this.Name = name;
            this.StartDate = startDate;
            this.ChildTasks = [];
            return this;
        }
        function Task(id, name, startDate, duration, isCompleted, dependencyTaskId)
        {
            this.Id = id;
            this.Name = name;
            this.StartDate = startDate;
            this.Duration = duration;
            this.IsCompleted = isCompleted;
            this.DependencyTaskId = dependencyTaskId;
            this.ChildTasks = []; 
            return this;
        }

        DataConvertor.ToServerPlane = function (ganttProjectInfo)
        {
            var serverPlane = new Plane(ganttProjectInfo.Id, ganttProjectInfo.Name, ganttProjectInfo.StartDate);
            var i = 0;
            for (; i < ganttProjectInfo.ParentTasks.length; i++)
            {
                serverPlane.ChildTasks[i] = DataConvertor.ToServerTask(ganttProjectInfo.ParentTasks[i]);
            }
            return serverPlane;
        }

        DataConvertor.ToServerTask = function (ganttTaskInfo)
        {
            var serverTask = new Task(ganttTaskInfo.Id, ganttTaskInfo.Name, ganttTaskInfo.EST, ganttTaskInfo.Duration, ganttTaskInfo.PercentCompleted > 0 ? true : false, ganttTaskInfo.PredecessorTaskId);
            var i = 0;
            for (i = 0; i < ganttTaskInfo.ChildTasks.length; i++)
            {
                serverTask.ChildTasks[i] = DataConvertor.ToServerTask(ganttTaskInfo.ChildTasks[i]);
            }
            return serverTask;
        }

        DataConvertor.ToGanttTaskInfo = function (task)
        {
            var ganttTaskInfo = new GanttTaskInfo(task.Id, task.Name, task.StartDate, task.Duration, task.IsCompleted ? 100 : 0, task.DependencyTaskId);
            var i = 0;
            for (i = 0; i < task.ChildTasks.length; i++)
            {
                ganttTaskInfo.addChildTask(DataConvertor.ToGanttTaskInfo(task.ChildTasks[i]));
            }
            return ganttTaskInfo;
        };
        DataConvertor.ToGanttProjectInfo = function (plane)
        {
            var ganttProjectInfo = new GanttProjectInfo(plane.Id, plane.Name, plane.StartDate);
            var i = 0;
            for (i = 0; i < plane.ChildTasks.length; i++)
            {
                ganttProjectInfo.addTask(DataConvertor.ToGanttTaskInfo(plane.ChildTasks[i]));
            }
            return ganttProjectInfo;
        };

        GanttChart.prototype.loadDataIn = function(container, serverPlaneData)
        {
            this.setEditable(true);
            this.addProject(DataConvertor.ToGanttProjectInfo(serverPlaneData));
            this.create(container);
        }
        GanttChart.prototype.getServerData = function ()
        {
            if (!this.Project[0]) return null;

            return DataConvertor.ToServerPlane(this.Project[0]);
        }


        function createChartControl(htmlDiv1) {
            // Initialize Gantt data structures
            //project 1
            var project1 = new GanttProjectInfo(1, "应用程序重新设计", new Date(2006, 5, 11));

            var parentTask1 = new GanttTaskInfo(1, "旧代码复查", new Date(2006, 5, 11), 208, 50, "");
            parentTask1.addChildTask(new GanttTaskInfo(2, "转换到J#", new Date(2006, 5, 11), 100, 40, ""));
            parentTask1.addChildTask(new GanttTaskInfo(13, "添加新功能", new Date(2006, 5, 12), 80, 90, ""));

            var parentTask2 = new GanttTaskInfo(3, "承载空间爱你", new Date(2006, 6,7), 190, 80, "1");
            var parentTask5 = new GanttTaskInfo(5, "J#借口", new Date(2006, 6, 14), 60, 70, "6");
            var parentTask123 = new GanttTaskInfo(123, "用户表示", new Date(2006, 6, 14), 60, 70, "");
            parentTask5.addChildTask(parentTask123);
            parentTask2.addChildTask(parentTask5);
            parentTask2.addChildTask(new GanttTaskInfo(6, "任务D", new Date(2006, 6, 10), 30, 80, "14"));

            var parentTask4 = new GanttTaskInfo(7, "单元测试", new Date(2006, 6, 15), 118, 80, "6");
            var parentTask8 = new GanttTaskInfo(8, "核心组件", new Date(2006, 6, 15), 100, 10, "");
            parentTask8.addChildTask(new GanttTaskInfo(55555, "用户标识验证", new Date(2006, 6, 20), 60, 10, ""));
            parentTask4.addChildTask(parentTask8);
            parentTask4.addChildTask(new GanttTaskInfo(9, "压力测试", new Date(2006, 6, 15), 80, 50, ""));
            parentTask4.addChildTask(new GanttTaskInfo(10, "用户界面", new Date(2006, 6, 16), 80, 10, ""));
            parentTask2.addChildTask(parentTask4);

            parentTask2.addChildTask(new GanttTaskInfo(11, "质量管理", new Date(2006, 6, 21), 60, 100, "6"));
            parentTask2.addChildTask(new GanttTaskInfo(12, "任务B", new Date(2006, 6, 8), 110, 1, "14"));
            parentTask2.addChildTask(new GanttTaskInfo(14, "任务A", new Date(2006, 6, 7), 8, 10, ""));
            parentTask2.addChildTask(new GanttTaskInfo(15, "任务C", new Date(2006, 6, 9), 110, 90, "14"));

            project1.addTask(parentTask1);
            project1.addTask(parentTask2);

//            //project 2
//            var project2 = new GanttProjectInfo(2, "Web Design", new Date(2006, 5, 17));

//            var parentTask22 = new GanttTaskInfo(62, "Fill HTML pages", new Date(2006, 5, 17), 157, 50, "");
//            parentTask22.addChildTask(new GanttTaskInfo(63, "Cut images", new Date(2006, 5, 22), 78, 40, ""));
//            parentTask22.addChildTask(new GanttTaskInfo(64, "Manage CSS", null, 90, 90, ""));
//            project2.addTask(parentTask22);

//            var parentTask70 = new GanttTaskInfo(70, "PHP coding", new Date(2006, 5, 18), 120, 10, "");
//            parentTask70.addChildTask(new GanttTaskInfo(71, "Purchase D control", new Date(2006, 5, 18), 50, 0, ""));
//            project2.addTask(parentTask70);

            
            // Create Gantt control
            var ganttChartControl = new GanttChart();
            // Setup paths and behavior
            ganttChartControl.setImagePath("imgs/");
            ganttChartControl.setEditable(true);
            ganttChartControl.showTreePanel(true);
            ganttChartControl.showContextMenu(true);
            ganttChartControl.showDescTask(true, 'n,e');
            ganttChartControl.showDescProject(true, 'n,d');

            // Load data structure		
            ganttChartControl.addProject(project1);

            var comeEle = document.getElementById('come');

            comeEle.onclick = function ()
            {
            }
            
//            ganttChartControl.addProject(project2);

            // Build control on the page
            ganttChartControl.create(htmlDiv1);

//            var serverPlane = DataConvertor.ToServerPlane(ganttChartControl.Project[0]);
//            alert(serverPlane.toString());
            //            alert(serverPlane.);
            var ddd =new GanttChart();
            ddd.loadDataIn('come', dataFromServer);
            var serverData = ddd.getServerData();

            alert(serverData);
        }
    
    </script>
</head>
<body onload="createChartControl('GanttDiv');">
    Simple read-only chart:
    <div style="width: 950px; height: 620px; position: relative" id="GanttDiv">
    </div>
    <div id="come" style="width: 950px; height: 620px; position: relative">
    superwolf
    </div>
    Mouse-hover some task to see the description.
</body>
</html>
